<template>
  <div class="v-model">
    <!-- 输入框的双向绑定 -->
    <h2 @click="val=val.split('').reverse().join('')">{{val}}</h2>
    <!-- 如果组件的自定义属性变量名是value,发送出来的自定义事件名称叫input,这两句代码就可以缩写成v-model,这就是组件的v-model的定义 -->
    <string-box v-model="val">
      <h1>我是组件的子标签</h1>
      <p>我是组件的另一个子标签</p>
    </string-box>
    <input v-model="val"  />
    <input :value="val" @input="val=$event.target.value" />
    <string-box
      :value="val"
      @input="val = $event"
    />
  </div>
</template>

<script>
import StringBox from '../components/StringBox.vue'
  export default {
    components:{StringBox},
    data(){
      return {
        val:'ABCDEFG'
      }
    }
  }
</script>

<style lang="sass" scoped>

</style>
